<template>
  <div class="invite-container">
    <div class="common-title"><h2>企业邀请加入</h2></div>
    <div class="orgInfo-container">

      <div class="item">
        <span class="label">当前用户：</span>{{ userInfo.realName | privateRealName }}
      </div>
      <div class="item">
        <span class="label">统一社会信用代码：</span>{{ orgInfo.socialCreditCode }}
      </div>
      <div class="item">
        <span class="label">企业编号：</span>{{ orgInfo.organizationCode }}
      </div>
      <div class="item">
        <span class="label">企业名称：</span>{{ orgInfo.organizationName }}
      </div>
      <div class="item flex-row">
        <span class="label">真实姓名：</span>
        <el-input v-model="realName" placeholder="请输入真实姓名" />
      </div>
      <div class="item tr">
        <el-button type="primary" @click="handleJoin">确定加入</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orgInfo: {},
      realName: ''
    }
  },
  watch: {
  },
  created() {
    this.fetchOrg()
  },
  destroyed() {
  },
  methods: {
    fetchOrg() {
      this.$store.dispatch('getOrganizationByInvitation', this.$route.params.code).then((res) => {
        this.orgInfo = res
      }).catch((_) => {

      })
    },
    async handleJoin() {
      if (!this.realName) {
        this.msgWarning('请填写真实姓名！')
        return
      }
      try {
        var token = await this.$store.dispatch('joinOrg', { invitationCode: this.orgInfo.invitationCode, realName: this.realName })
        await this.$store.dispatch('resetToken', token)
        this.$alert(`企业加入成功！`, '加入成功', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push({ path: '/' })
          }
        })
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style lang="scss">
.invite-container {
  .el-form-item {
    padding: 0 20px;
    margin-bottom: 11px;
  }
  .el-input {
    input {
      height: 40px;
      border-radius: 2px;
    }
  }
}
</style>
<style lang="scss" scoped>
.invite-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 740px;
  margin: 0 auto;
  background: #ffffff;
  padding: 0px 25px 5px 25px;
  .common-title{
    width: 100%;
  }
  .orgInfo-container{
    width: 600px;
    margin: 40px auto ;
    .item{
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: bold;
        .label{
            font-size: 14px;
            min-width: 70px;
            line-height: 40px;
            font-weight: normal;
        }
    }
    .item:last-child{
        margin-top: 65px;
    }
  }
  .el-button{
    height: 40px;
  }

}
</style>
